<template>
 <div class="wp-tab-box">
       <div class="wp-tab-box__btn">
      <el-button
type="warning" v-if="sourceType==='default'" icon="el-icon-plus" @click.native="orderCreate">创建订单</el-button>
    </div>
    <el-table
        max-height="300"
       highlight-current-row
       stripe
       :data="orderList"
       :tooltip-effect="'dark'"
        empty-text="暂无订单">
      <el-table-column  label="订单号" prop="orderNo" min-width="100">
                  <template slot-scope="scope">
            <el-link
              type="primary"
              @click="orderDetail(scope.row)"
              >{{ scope.row.orderNo }}</el-link
            >
          </template>
      </el-table-column>
      <el-table-column label="订单金额（元）" prop="orderAmount" show-overflow-tooltip>
        <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip content="订单金额（元）" placement="top"><span>订单金额（元）</span></el-tooltip>
            </div>
        </template>
      </el-table-column>
      <el-table-column label="订单实际金额（元）" prop="orderActualAmount" show-overflow-tooltip>
          <template slot="header">
            <div class="wp-table-header__tooltip">
              <el-tooltip content="订单实际金额（元）" placement="top"><span>订单实际金额（元）</span></el-tooltip>
            </div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="100" prop="orderCreateDate">
        <template slot-scope="scope">
          {{ scope.row.orderCreateDate | FormatDate('yyyy-MM-dd') || '--'}}
        </template>
      </el-table-column>
      <el-table-column label="完成时间" width="100" prop="orderCompletionDate">
        <template slot-scope="scope">
          {{ scope.row.orderCompletionDate | FormatDate('yyyy-MM-dd') || '--'}}
        </template>
      </el-table-column>
      <el-table-column label="交货时间" width="100" prop="deliveryDate">
                <template slot-scope="scope">
          {{ scope.row.deliveryDate | FormatDate('yyyy-MM-dd') || '--'}}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="statusName"></el-table-column>
    </el-table>
          <Sale-order-detail-panel
            v-if="showSalesOrderDetail"
            sourceType="customerInfo"
      :show.sync="showSalesOrderDetail"
      :data.sync="salesDetailData"/>
      <Sale-order-create-panel
            v-if="showSalesCreateShow"
            :customerInfo="customerInfo"
            sourceType="customerInfo"
            :show.sync="showSalesCreateShow"
            @afterSave="getCustomerOrderInfoList"
            title="新建订单"/>
 </div>
</template>
<script>
import SaleOrderDetailPanel from '@/views/eims/sales/order/components/DetailPanel'
import SaleOrderCreatePanel from '@/views/eims/sales/order/components/CreatePanel'
import Mixins from '../mixins'
export default {
  props: {
    sourceType: {type: String, default: 'default'},
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  mixins: [Mixins],
  components: {SaleOrderDetailPanel, SaleOrderCreatePanel},
  watch: {
    param: {
      handler (val) {
        this.customerInfo = {...val}
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      orderList: [],
      customerInfo: {},
      showSalesOrderDetail: false,
      salesDetailData: {},
      showSalesCreateShow: false
    }
  },
  created () {
    this.getCustomerOrderInfoList(this.customerInfo)
  },
  methods: {
    getCustomerOrderInfoList (customerInfo) {
      if (!customerInfo || customerInfo === undefined) {
        customerInfo = this.customerInfo
      }
      this.requestOption('customerGetOrder', customerInfo.customerCode, (res) => {
        this.orderList = res.data || []
      })
    },
    orderDetail (row) {
      this.salesDetailData = {orderNo: row.orderNo}
      this.showSalesOrderDetail = true
    },
    orderCreate () {
      this.showSalesCreateShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-tab-box{
  &__btn{
  text-align: right;
  margin: 5px;
  }
}
</style>
